<template>
  <van-popup
    v-model="showArea"
    position="bottom"
    @close="closeArea"
    class="popDiv"
  >
    <div>
      <img :src="closeimg" @click="closeArea" />
      <div class="titleDiv">{{ title }}</div>
      <div class="tabbarDiv">
        <div
          @click="clickTypeTabbar"
          v-bind:class="{
            tabbarItemSelect: !selectType,
            tabbarItemDefault: selectType
          }"
        >
          选择类型
        </div>
        <div
          v-show="selectType"
          v-bind:class="{
            tabbarItemSelect: selectType,
            tabbarItemDefault: !selectType
          }"
        >
          请选内容
        </div>
      </div>

      <div class="listViewDiv" v-show="!selectType">
        <div
          v-for="(item, index) in typeArray"
          class="listItemDefault"
          @click="clickTypeWithIndex(index)"
        >
          {{ item.typeName }}
        </div>
      </div>

      <div class="listViewDiv" v-show="selectType">
        <div
          v-for="(item, index) in contentArray"
          class="listItemDefault"
          @click="clickItemWithItem(item)"
        >
          {{ item.contentName }}
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { api_repairType, api_repairContent } from "@/service/api/repair";

export default {
  name: "SelectRepairTypePopup",
  data() {
    return {
      closeimg: require("@/images/icon/login/delete.png"),
      selectType: false,
      selectNum: 0,
      typeArray: [],
      contentArray: []
    };
  },
  props: {
    title: String,
    showArea: Boolean,
    showClick: Function,
    selectItem: Function,
    closeArea: Function
  },
  methods: {
    clickTypeTabbar() {
      this.selectType = false;
      this.contentArray = [];
    },
    clickTypeWithIndex(index) {
      console.log(index);
      this.selectNum = index;
      var item = this.typeArray[index];
      this.requestContentData(item.id);

      this.selectType = true;
    },
    clickItemWithItem(item) {
      var typeItem = this.typeArray[this.selectNum];

      let result = {
        typeItem: typeItem,
        contentItem: item
      };
      this.selectItem(result);
    },
    requestTypeData() {
      api_repairType()
        .then(res => {
          console.log(res);

          this.typeArray = res.data;
        })
        .catch(() => {});
    },
    requestContentData(repairTypeId) {
      api_repairContent(repairTypeId)
        .then(res => {
          this.contentArray = res.data;
        })
        .catch(() => {});
    }
  },
  created() {
    this.requestTypeData();
  }
};
</script>

<style scoped>
.popDiv {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.titleDiv {
  height: 1.8666666666666667rem;
  font-size: 1.3333333333333333rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(18, 28, 50, 1);
  line-height: 1.8666666666666667rem;
  margin: 1.4333333333333333rem 1.3333333333333333rem;
}
img {
  margin-top: 1.3333333333333333rem;
  margin-left: 1.3333333333333333rem;

  height: 1rem;
  width: 1rem;
}
.tabbarDiv {
  margin-left: 1.3333333333333333rem;
  height: 2.7333333333333334rem;
  display: flex;
  flex-direction: row;
  justify-content: start;
  border-bottom: 0.5px solid #f0f1f5;
}
.tabbarItemDefault {
  margin-right: 2.3333333333333335rem;

  height: 2.7333333333333334rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 2.7333333333333334rem;
}
.tabbarItemSelect {
  margin-right: 2.3333333333333335rem;

  height: 2.7333333333333334rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(150, 151, 153, 1);
  line-height: 2.7333333333333334rem;

  border-bottom: 2px solid #3388ff;
}
.listViewDiv {
  /*border-bottom: 0.5px solid #f0f1f5;*/
  /*margin-bottom: 4rem;*/
  overflow-y: auto;
  height: 15rem;
  padding-left: 1.3333333333333333rem;
  padding-top: 0.8666666666666667rem;
}
.listItemDefault {
  height: 1.2rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.2rem;
  margin-bottom: 1rem;
}
</style>
